import { FC, useEffect, useState } from "react";
import { Avatar } from "antd";
import "./index.scss";
import contacts from "../../../../assets/icon/contacts.svg";
import { UserOutlined } from "@ant-design/icons";
import newFrend from "../../../../assets/icon/new-frend.svg";
import myGroup from "../../../../assets/icon/my-group.svg";
import blacklist from "../../../../assets/icon/blacklist.svg";
import { getFrendList } from "@renderer/api";

type PropType = {
  id: string;
  onSelect: any;
  onDoubleSelect: any;
};
const ContactsList: FC<PropType> = (props): JSX.Element => {
  const { id, onSelect, onDoubleSelect } = props;
  const [activedId, setActiveId] = useState(id);
  const [frendList, setFrendList] = useState([]);

  useEffect(() => {
    const list = getFrendList();
    setFrendList(list);
  }, []);

  const handleItemClick = (id) => {
    setActiveId(id);
    onSelect(id);
  };
  const handleItemDoubleClick = () => {
    onDoubleSelect(id);
  };
  const isActive = (id) => {
    if (id === activedId) {
      return "contacts-item--active";
    } else {
      return "";
    }
  };
  const contactList = [
    {
      id: "newFrend",
      name: "新的好友",
      avatar: newFrend
    },
    {
      id: "myGroup",
      name: "我的群聊",
      avatar: myGroup
    },
    {
      id: "blacklist",
      name: "黑名单",
      avatar: blacklist
    },
    {
      id: "myFrend",
      name: "我的好友",
      avatar: ""
    }
  ];
  return (
    <div className="contacts-list">
      {contactList.map((item) => {
        const { id, name, avatar } = item;
        if (id === "myFrend") {
          return;
        }

        return (
          <div
            key={id}
            className={`fiexd-item ${isActive(id)}`}
            onClick={() => handleItemClick(id)}
          >
            <div className="fiexd-item--left">
              <Avatar size={30} src={avatar} />
            </div>
            <div className="fiexd-item--right">{name}</div>
          </div>
        );
      })}
      <div className="my-frend-type">我的好友</div>
      {frendList.map((item) => {
        const { frendId, frendName, message } = item;
        return (
          <div
            key={frendId}
            className={`contacts-item ${isActive(frendId)}`}
            onClick={() => handleItemClick(frendId)}
            onDoubleClick={() => handleItemDoubleClick(frendId)}
          >
            <div className="left">
              {/* <Avatar size={32} src={avatar} /> */}
              <Avatar size={32}>{frendName.charAt(0)}</Avatar>
              <div className="wrap">
                <div className="title">{frendName}</div>
                <div className="message">{message}</div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default ContactsList;
